<script setup lang="ts">
import {onMounted } from 'vue'
const props = defineProps({
    // 麻将牌编码
    code: { type: String, required: false },
    // transform属性，用户定义麻将如何进行3d旋转
    transformStyle: {type: String, required: false},
    isAbsolute: {type: Boolean, required: false, default: false},
    // 缩放
    scale: {type: Number, required: false, default: 1},
    showTagLeftTop: {type: Boolean, required: false, default: false},
    tagLeftTopBackgroundColor: {type: String, required: false, default: '#F56C6C'},
    tagLeftTopFontColor: {type: String, required: false, default: 'white'},
    tagLeftTopText: {type: String, required: false, default: ''}
})

let scale = props.scale;

let tileItemClass = {
    'tile-item': true,
    'postion-relative': !props.isAbsolute,
    'postion-absolute': props.isAbsolute
}

let frontStyle = {
    'background-image': ''
}
// 初始化牌面图片
function initFrontImage() {
    let baseImageUrl = "/images/tile/";
    if (props.code) {
        frontStyle['background-image'] = "url(" + baseImageUrl + props.code + ".jpg)";
    }
}
initFrontImage();

onMounted(() => {
   
})

</script>

<template>
    <div :class="tileItemClass" :style="{'transform' : props.transformStyle}">
        <!--左上角角标-->
        <div class="tag-left-top" v-if="props.showTagLeftTop">
            {{props.tagLeftTopText}}
        </div>
        <!-- 首先是牌面以及白色部分区域渲染 -->
        <div class="front" :style="frontStyle"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <!-- 下边是有颜色的背部渲染 -->
        <div class="back-part-back"></div>
        <div class="back-part-top"></div>
        <div class="back-part-bottom"></div>
        <div class="back-part-left"></div>
        <div class="back-part-right"></div>
    </div>
</template>

<style scoped lang="scss">

/** 展示左边玩家 */
.postion-relative {
    position: relative;
    left: 0;
    top : 0;
}
.postion-absolute {
    position: absolute;
}
.tag-left-top{
    width: v-bind('scale * 40 + "px"');
    height: v-bind('scale * 40 + "px"');
    font-size: v-bind('scale * 15 + "px"');
    padding-top: v-bind('scale * 1 + "px"');
    padding-left: v-bind('scale * 3 + "px"');
    font-weight: bold;
    z-index: 1000;
    color: v-bind('tagLeftTopFontColor');
    background-color: v-bind('tagLeftTopBackgroundColor');
    /* polygon 定义多边形， ()里面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点 */
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
.tile-item
{
    width: v-bind('scale * 60 + "px"'); 
    height: v-bind('scale * 80 + "px"');
    /* margin: 100px auto; */
    // position: relative;
    // left: 0;
    // top : 0;
    /* 让box默认旋转，方便观察 */ 
    // transform: rotate3d(10,10,0,-30deg); 
    // transform: rotateX(-15deg);
    transform-style: preserve-3d;
    /* box-shadow: -10px 10px 5px #888888; */
    // transition: all 0.5s ease-in-out; 
    /* 添加透视景深  默认观察点在正方体正中心横截面  在盒子内部*/
    // perspective: 350px; 
    
    /* perspective-origin: ;设置透视的默认观察角度 */
    // perspective-origin:15px 90px ; 
    .front-img {
        width: 100%;
        height: 100%;
    } 
    .front{
        width: v-bind('scale * 60 + "px"');
        height: v-bind('scale * 80 + "px"');
        background-color: #a6a6a6;
        background-size:v-bind('scale *60 + "px"')  v-bind('scale * 80 + "px"');
        background-repeat:no-repeat;
    }
    .back-part-back{
        width: v-bind('scale *60 + "px"');
        height: v-bind('scale *80 + "px"');
        background-image: url("/images/tile/back/tile-item-back.jpg");
        background-repeat: no-repeat;
        background-size: v-bind('scale *60+ "px"') v-bind('scale *80 +"px"');
        // border-radius: 2px;
        // background-color: #036c03;
        // border-left: 1px solid #525961;
        // border-right: 1px solid #525961;
        /** 往里边移动 40(麻将整体宽) 至底部*/
        transform: translateZ(v-bind('scale *-40 + "px"'));
    }
    .back-part-top{
        width: v-bind('scale *60 + "px"');
        height: v-bind('scale *10 + "px"');
        border-left: v-bind('scale *2 + "px"') solid #098516;
        border-right: v-bind('scale *2 + "px"') solid #098516;
        /* background-color: green; */
        background-image: linear-gradient(to right, #2f7404, #067304);
        /** 往里边移动 40(麻将整体宽) - height/2 ，然后沿着Y轴往上移动height/2 , 再沿着X轴翻转90度  */
        transform: translateZ(v-bind('scale *-35 + "px"')) translateY(v-bind('scale *-5 + "px"')) rotateX(90deg);
    }
    .back-part-bottom {
        width: v-bind('scale *60 + "px"');
        height: v-bind('scale *10 + "px"');
        /* background-color: green; */
        background-image: linear-gradient(to right, #2f7404, #067304);
        /** 往里边移动 40(麻将整体宽) - height/2 ，然后沿着Y轴往下移动80(麻将整体高) - height/2 , 再沿着X轴翻转90度  */
        transform: translateZ(v-bind('scale *-35 + "px"')) translateY(v-bind('scale *75 + "px"')) rotateX(90deg);
    }
    .back-part-left{
        width: v-bind('scale *10 + "px"');
        height: v-bind('scale *80 + "px"');
        background-color: #058c05;
        /** 往里边移动 40(麻将整体宽) - width/2 ，然后沿着X轴往左移动width/2 , 再沿着Y轴翻转90度  */
        transform: translateZ(v-bind('scale *-35 + "px"')) translateX(v-bind('scale *-5 + "px"')) rotateY(90deg);
    }
    .back-part-right{
        width: v-bind('scale *10 + "px"');
        height: v-bind('scale *80 + "px"');
        background-color: #058c05;
        /** 往里边移动 40(麻将整体宽) - width/2 ，然后沿着X轴往右移动 60(麻将整体宽度) - width/2 , 再沿着Y轴翻转90度  */
        transform: translateZ(v-bind('scale *-35 + "px"')) translateX(v-bind('scale *55 + "px"')) rotateY(90deg);
    }
    .left{
        position: absolute;
        background-color: white;
        width: v-bind('scale *30 + "px"');
        height: v-bind('scale *80 + "px"');
        background-image: linear-gradient(#bebebe, #d1dbe5);
        /** 向z里边移动width/2  再向X左边移动width/2 然后做90度翻转 */
        transform: translateZ(v-bind('scale *-15 + "px"')) translateX(v-bind('scale *-15 + "px"')) rotateY(90deg);
    }
    .right{
        position: absolute;
        /* background-color: white; */
        width: v-bind('scale *30 + "px"');
        height: v-bind('scale *80 + "px"');
        background-image: linear-gradient(#bebebe, #d1dbe5);
        /** 向z里边移动width/2  再向右边移动60(立方体的长)-width/2 然后做90度翻转 */
        transform: translateZ(v-bind('scale *-15 + "px"')) translateX(v-bind('scale *45 + "px"'))  rotateY(90deg);
    }
    .top{
        position: absolute;
        background-color: #cfcfcf ;
        width: v-bind('scale *60 + "px"');
        height: v-bind('scale *30 + "px"');
        border-left: v-bind('scale *1 + "px"') solid #b3abab;
        border-right: 1px solid #b3abab;
        /* background-image: linear-gradient(to right, gray, white); */
        /** 向z里边移动height/2  再向y轴往上移动height/2 然后在做90度翻转*/
        transform: translateZ(v-bind('scale *-15 + "px"')) translateY(v-bind('scale *-15 + "px"'))  rotateX(90deg);
    }
    .bottom{
        position: absolute;
        width: v-bind('scale *60 + "px"');
        height: v-bind('scale *30 + "px"');
        background-color: #cfcfcf ;
        /** 向z里边移动height/2  再向y轴往下移动 80(立方体的高) - height/2 然后在做90度翻转*/
        transform: translateZ(v-bind('scale *-15 + "px"')) translateY(v-bind('scale *65 + "px"')) rotateX(90deg);
    }
}
// .tile-item:hover {
//     transform: rotateX(-30deg) rotateY(-110deg) translateZ(0px) rotateX(90deg);
// }
.tile-item > div {
    position: absolute;
    /* opacity: 0.5; */
}

</style>
